<template>
  <div class="login">
    <input type="text" v-model="username"/>
    <input type="password" v-model="password"/>
    <button @click="login">登录</button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
    data () {
        return {
            username: 'admin',
            password: 'admin'
        }
    },
    methods: {
        async login () {
            try {
                const data = await this.$axios({
                    method: 'post',
                    url: '/login',
                    data: {
                        "user": this.username,
                        "password": this.password
                    }
                })
                if( data.status == 200) {
                    this.$store.state.token = data.data.data.token
                    this.$router.push({'name': 'message'})
                    console.log(this.$store.state.token)
                }
            } catch (error) {
                
            }            
        }
    }
};
</script>

<style lang='less' scoped>
.login{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    button, input{
        margin: 15px 0;
        padding: 10px;
        box-sizing: border-box;
        width: 25vw;
        font-size: 14px;
        max-width: 335px;
        min-width: 200px;
        border-radius: 5px;
    }
    input:focus{
        border: 1px solid #1890ff;
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
    }
    button{
        font-size: 15px;
        color: #FFFFFF;
        background-color: #419cf1;
    }

    button:hover{
        cursor: pointer;
        background: #0285ff;
        border-color: #0285ff;
        color: #FFFFFF;
    }
}
</style>